<!--
    Va-Radio 《数据字典的单选框》

    使用方式：
        <va-radio v-model="model" :keyData="keyData"/>

    1.keyData:数据字典的唯一标识
    规范：返回的数据要符合(JSON中对应的字段必须：label/value/disabled,不能其他)
      [
        {label:'显示1',value:'值1',disabled:false},
        {label:'显示2',value:'值2',disabled:false},
        {label:'显示3',value:'值3',disabled:false},
        ...
      ]
    2.v-model 数据的双向绑定,绑定父组件中的字段
    3.disabled 是否禁用
-->
<template>
    <va-load :dictKey="dictKey"
             v-model="modelValue2"
    >
        <template #default="{  options }">

            <el-radio-group v-model="modelValue2"
                            :size="size"
                            @change="change"
                            :disabled="disabled"
                >
                <el-radio-button v-for="item in options"
                                 :key="item.value"
                                 :label="item.value"
                                 :disabled="item.disabled"
                >
                    {{item.label}}
                </el-radio-button>
            </el-radio-group>

        </template>
    </va-load>
</template>

<script>
    import {ref, watch, defineComponent} from 'vue'
    import {commonProp} from "./common"
    export default defineComponent({
        name: "Va-Radio",
        props: {
            ...commonProp

        },
        created() {
        },
        setup(props, context) {


            //选项值
            const modelValue2 = ref(props.modelValue)

            //watch
            watch(() => props.modelValue, (val) => {
                modelValue2.value=val
            })


            //EVENT
            function change(value) {
                context.emit("change", value)
                context.emit("update:modelValue", value)
            }


            return {
                //data
                modelValue2,
                //fun
                //event
                change
            }
        }
    })
</script>

<style scoped>

</style>